<template>
  <div class="contentDiv">
    es6常用方法和深拷贝
    <p>
      <!-- 1.解构赋值注意解构的对象不能为undefined、null。还可以解构自己需要的变量名  const {apiname:zkxname} = obj; -->
    </p>
    <p>
      合并数组且去重 const c = [...new Set([...a,...b])]<br />
      合并对象 const obj = {...obj1,...obj2};
    </p>
    <p>
      模板字符串可以计算 const name = '小明'; const score = 59; const result =
      `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;
    </p>
    <p>
      const condition = [1,2,3,4]; condition.includes(10) // false
      condition.includes(3) // true
    </p>

    <p>
      const a = [1,2,3,4,5]; const result = a.find( item =>{ return item === 3 }
      ) //find比filter性能好，find方法中找到符合条件的项，就不会继续遍历数组。
    </p>
    <p>获取对象属性值 const name = obj?.name;</p>
    <p>空值运算符 if((value??'') !== ''){ //... }</p>
    <p>
      异步 const fn = () =>{ Promise.all([fn1(),fn2()]).then(res =>{
      console.log(res);// [1,2] }) }

      如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()
    </p>
    <div v-for="(value,key) in list" :key="key">
        {{value}}------{{key}}
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";

//reactive不能整体赋值
const obj2 = reactive({ a: 111 });
obj2.a++;
console.log(Object.assign({}, obj2));

const ary1 = reactive([1, 2, 3]);
var ary2 = [...ary1];
console.log(ary2);
let obj = {
  name: "张三",
  age: "20",
};
let newObj = {
  name: "李四",
  age: "30",
  id: "4",
};
Object.keys(obj).forEach((key) => {
  obj[key] = newObj[key];
});
console.log(obj);

const { name: name1 } = obj;
console.log(name1);

const list=reactive({
    name:'张三',
    height:'180',
    age:'20',
    id:'1',

})
</script>

<style lang="scss" scoped></style>
